<template>
  <div>
      <div class="app-header">
        <div class="app-header-left">
<!--          <svg-icon name="blog-icon"></svg-icon>-->
<!--          <img class="app-header-icon"-->
<!--               @click="$router.push('/')"-->
<!--               src="../../assets/img/preview.gif">-->
          <p class="app-name"  @click="$router.push('/')">UUM BLOG</p>
          <el-menu :router=true
                   menu-trigger="click"
                   default-active="/"
                   mode="horizontal"
                   background-color="#393D49"
                   text-color="#fff"
                   active-text-color="#5FB878">
            <el-menu-item index="/">
              <svg xmlns="http://www.w3.org/2000/svg"
                   style="transform: translateY(-2px);width: 24px;height: 24px;"
                   viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
                   stroke-linejoin="round" class="feather feather-home">
                <path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/>
                <polyline points="9 22 9 12 15 12 15 22"/>
              </svg>
              <span class="menu-span">首页</span>
            </el-menu-item>
            <el-menu-item index="/message">
              <svg xmlns="http://www.w3.org/2000/svg"
                   style="transform: translateY(-1px);width: 24px;height: 24px;"
                   viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
                   stroke-linejoin="round" class="feather feather-calendar">
                <rect x="3" y="4" width="18" height="18" rx="2" ry="2"/>
                <line x1="16" y1="2" x2="16" y2="6"/>
                <line x1="8" y1="2" x2="8" y2="6"/>
                <line x1="3" y1="10" x2="21" y2="10"/>
              </svg>
              <span class="menu-span">留言板</span>
            </el-menu-item>
          </el-menu>
        </div>
        <div class="app-header-right">
          <button class="mode-switch" title="Switch Theme" @click="handleMoon">
            <svg class="moon" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
                 stroke-width="2" width="24" height="24" viewBox="0 0 24 24">
              <defs></defs>
              <path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"></path>
            </svg>
          </button>
          <el-dropdown v-if="$store.getters.userId" @command="handleMessageCommand">
            <button class="notification-btn">
              <span class="notification-number" v-if="$store.getters.messageValue.length > 0">
                {{ $store.getters.messageValue.length }}
              </span>
              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
                   stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                   class="feather feather-bell">
                <path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"/>
                <path d="M13.73 21a2 2 0 0 1-3.46 0"/>
              </svg>
            </button>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item v-if="$store.getters.messageValue.length > 0">
                <div style="float: right" @click="handleClearMsg">清空</div>
              </el-dropdown-item>
              <el-dropdown-item disabled>
                {{ $store.getters.messageValue.length > 0 ? '博主发布新的文章啦～' : '暂无消息噢～' }}
              </el-dropdown-item>
              <el-dropdown-item v-for="(item,index) in $store.getters.messageValue"
                                :command="`${item.id}:${item.blogId}:${index}`">{{ item.blogTitle }}
              </el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>

          <button class="profile-btn">
            <el-dropdown @command="handleCommand"  v-if="$store.getters.userId">
              <div>
                <img class="app-header-img" src="https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif">
                <span>{{ $store.getters.nickname }}</span>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item command="logout">
                    注销
                  </el-dropdown-item>
                </el-dropdown-menu>
              </div>
            </el-dropdown>
            <div v-if="!$store.getters.userId" @click="loginDialog = true">
              <svg t="1646014539922"
                   class="icon"
                   viewBox="0 0 1084 1024"
                   version="1.1"
                   xmlns="http://www.w3.org/2000/svg"
                   p-id="3735" width="24" height="24" style="margin-right: 8px;transform: translateY(3px);">
                <path
                    d="M655.380078 298.927686a34.354196 34.354196 0 0 1 0-48.268549 33.731765 33.731765 0 0 1 47.947295 0l233.773176 235.52c7.027451 7.087686 10.039216 16.524549 9.59749 25.820863 0.461804 9.296314-2.549961 18.733176-9.59749 25.86102l-233.773176 235.52a33.731765 33.731765 0 0 1-47.947295 0 34.374275 34.374275 0 0 1 0-48.288628L833.054118 546.133333H33.872314C15.199373 546.133333 0 530.873725 0 512c0-18.833569 15.179294-34.133333 33.872314-34.133333H833.054118l-177.653961-178.938981zM948.725961 1024H271.058824c-74.852392 0-135.529412-61.138824-135.529412-136.533333v-136.533334h67.764706v136.533334c0 37.707294 30.33851 68.266667 67.764706 68.266666h677.647058c37.426196 0 67.764706-30.579451 67.764706-68.266666V136.533333c0-37.707294-30.33851-68.266667-67.764706-68.266666H271.058824c-37.426196 0-67.764706 30.559373-67.764706 68.266666v136.533334H135.529412V136.533333C135.529412 61.138824 196.206431 0 271.058824 0h677.647058C1023.558275 0 1084.235294 61.138824 1084.235294 136.533333v750.933334c0 75.39451-60.67702 136.533333-135.529412 136.533333z"
                    p-id="3736"
                    fill="#fff">
                </path>
              </svg>
              <span style="transform: translateY(-3px);">登陆</span>
            </div>
          </button>
        </div>
      </div>

    <el-dialog
        custom-class="custom-dialog"
        width="100%"
        :visible.sync="loginDialog"
        :destroy-on-close="true"
        :show-close="false">
      <login @closeDialog="loginDialog = false"/>
    </el-dialog>
  </div>


</template>

<script>
import {logout} from '@/api/user'
import {readMessage, clearAllMsg} from '@/api/userMessage'
import login from "@/components/Login/login";

export default {
  name: "BaseHeader",
  components: {login},
  data() {
    return {
      loginDialog: false
    }
  },
  methods: {
    handleMoon() {
      const modeSwitch = document.querySelector('.mode-switch');
      document.documentElement.classList.toggle('dark');
      modeSwitch.classList.toggle('active');
    },
    handleCommand(command) {
      if (command == 'logout') {
        this.$store.dispatch('logout')
      }
    },
    handleMessageCommand(command) { //command  ：第一个的消息的id，第二个博文ID，第三个当前下标
      let split = command.split(':');
      readMessage(split[0])
      this.$store.commit("DELETE_MESSAGE_VALUE", split[2])
      this.$router.push('/blog/' + split[1])
    },
    handleClearMsg() {
      this.$confirm('确定清空全部消息吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        clearAllMsg().then(res => {
          if (res.status) {
            this.$message.success("清空消息成功");
            this.$store.commit('DELETE_ALL_MESSAGE')
          } else {
            this.$message.error("清空消息失败");
          }
        }).catch(() => {
        });
      })
    },
  }
}
</script>


<style>
.custom-dialog {
  background: transparent !important;
  box-shadow: none !important;
}

.custom-dialog .el-dialog__body {
  background: transparent !important;
  box-shadow: none !important;
  font-size: 16px !important;
  word-break: normal !important;
}

</style>

